<script setup lang="ts">
import FlowDesign from '@/views/flowDesign/index.vue'
import type { Field } from '@/components/Render/type'
import type { EndNode, FlowNode, StartNode } from '@/views/flowDesign/nodes/type'
import { downloadXml } from '@/api/modules/model'
import { getFlowFieldByFlowFormId,getFlowFormById,updateFlowForm} from '@/api/modules/flowForm'
import type { FlowForm,ProcessModel} from '@/api/dataType';
import { v4 as uuid4 } from 'uuid'
const flowFormVersion = ref<FlowForm>({
    id: '',//id
    flowInfoId: 0,//流程信息id
    versionName: '',//版本名称
    mvFormJson: [],//移动端表单
    pcFormJson: [],//PC端表单
    flowBpmnXml: '',
    lowFlowJson: '',
    processModel: {
      code: '',
      name: '',
      icon: {
        name: '',
        color: ''
      },
      process: {
        id: '',
        pid: '',
        name: '',
        type: 'start',
        executionListeners: []
      },
      enable: true,
      version: 1,
      sort: 0,
      groupId: '',
      remark: ''
    },
    createTime: '',//创建时间
    updateTime:'',//修改时间
    exist:0,//是否删除
    state:0
});
const updataSign = ref(false);
//传递参数
const props = defineProps({
  //流程文件id
  flowFormId: {
    type: String,
    required: true
  },
});
// 流程节点
const process = ref<FlowNode>({
  id: 'root',
  pid: undefined,
  type: 'start',
  name: '发起人',
  executionListeners: [],
  formProperties: [],
  child: {
    id: 'end',
    pid: 'root',
    type: 'end',
    name: '流程结束',
    executionListeners: [],
    child: undefined
  } as EndNode
} as StartNode)
// 表单字段
const fields = ref<Field[]>([
  // {
  //   id: 'field_da2w55',
  //   type: 'formItem',
  //   label: '请假人',
  //   name: 'UserSelector',
  //   value: null,
  //   readonly: false,
  //   required: true,
  //   hidden: false,
  //   props: {
  //     multiple: false,
  //     disabled: false,
  //     placeholder: '请选择用户',
  //     style: {
  //       width: '100%'
  //     }
  //   }
  // },
  // {
  //   id: 'field_fa2w40',
  //   type: 'formItem',
  //   label: '请假天数',
  //   name: 'ElInputNumber',
  //   value: null,
  //   readonly: false,
  //   required: true,
  //   hidden: false,
  //   props: {
  //     disabled: false,
  //     placeholder: '请假天数',
  //     style: {
  //       width: '100%'
  //     },
  //     min: 0,
  //     max: 100,
  //     step: 1,
  //     precision: 0
  //   }
  // },
  // {
  //   id: 'field_d42t45',
  //   type: 'formItem',
  //   label: '请假事由',
  //   name: 'ElSelect',
  //   value: null,
  //   readonly: false,
  //   required: true,
  //   hidden: false,
  //   props: {
  //     disabled: false,
  //     multiple: false,
  //     placeholder: '请选择请假事由',
  //     options: [
  //       {
  //         label: '事假',
  //         value: '事假'
  //       },
  //       {
  //         label: '病假',
  //         value: '病假'
  //       },
  //       {
  //         label: '婚假',
  //         value: '婚假'
  //       },
  //       {
  //         label: '产假',
  //         value: '产假'
  //       },
  //       {
  //         label: '丧假',
  //         value: '丧假'
  //       },
  //       {
  //         label: '其他',
  //         value: '其他'
  //       }
  //     ],
  //     style: {
  //       width: '100%'
  //     }
  //   }
  // },
  // {
  //   id: 'field_522g58',
  //   type: 'formItem',
  //   label: '请假原因',
  //   name: 'ElInput',
  //   value: null,
  //   readonly: false,
  //   required: true,
  //   hidden: false,
  //   props: {
  //     type: 'textarea',
  //     placeholder: '请输入请假原因',
  //     autosize: {
  //       minRows: 3,
  //       maxRows: 3
  //     },
  //     disabled: false,
  //     style: {
  //       width: '100%'
  //     }
  //   }
  // }
])
// 是否只读
const readOnly = ref(false)
// 是否暗黑模式
const isDark = ref(false)
const converterBpmn = () => {
  const processModel:ProcessModel = {
    code: 'flow_' + uuid4(),
    name: uuid4(),
    icon: {
      name: 'el:HomeFilled',
      color: '#409EFF'
    },
    process: process.value,
    enable: true,
    version: 1,
    sort: 0,
    groupId: '',
    remark: ''
  }
  flowFormVersion.value.processModel = processModel;
  console.log(flowFormVersion.value);
  updataSign.value = true;
  updateFlowForm(flowFormVersion.value,0).then(res=>{
        ElNotification({
            title: '修改成功',
            message: '表单保存成功',
            type: 'success',
        })
        updataSign.value = false;
    })
  //downloadXml(processModel)
}
const handleToggleDark = () => {
  if (isDark.value) {
    document.documentElement.classList.add('dark')
  } else {
    document.documentElement.classList.remove('dark')
  }
}

const getFlowField = () =>{
  getFlowFieldByFlowFormId(props.flowFormId).then(res=>{
    fields.value = res.data;
  })
}

//查询表单
const getFormData = async() =>{
    getFlowFormById(props.flowFormId).then(res=>{
      if(res.data.lowFlowJson){
        let obj = JSON.parse(res.data.lowFlowJson);
        process.value = obj.process;
      }
      flowFormVersion.value = res.data;
    })
}

onMounted(()=>{
  getFlowField();
  getFormData();
})


</script>

<template>
  <el-button-group>
      <el-button @click="converterBpmn" type="primary" style="float: right;margin: 15px;" v-loading="updataSign" >保存流程</el-button>
  </el-button-group>
  <FlowDesign :process="process" :fields="fields" :readOnly="readOnly">
    <!--<el-switch
      inline-prompt
      active-text="正常模式"
      inactive-text="暗黑模式"
      @change="handleToggleDark"
      v-model="isDark"
    />
    <el-switch
      v-model="readOnly"
      active-text="只读模式"
      inactive-text="编辑模式"
      inline-prompt
      :active-value="true"
      :inactive-value="false"
    />-->
    
  </FlowDesign>
</template>

<style scoped lang="scss"></style>
